<template>
<div class="manager-info">
    <div class="manager-info-header">
      <h2>社团信息展示</h2>
      <el-input
      v-model="searchInfo"
      size="large"
      placeholder="请输入社团名称搜索信息"
      class="input-with-select search-info"
      @input="selectStu"
    >
    </el-input>
    </div>
  <div class="manager-info-content">
    <AssInfoCard v-model:applyInfo="applyInfoData"></AssInfoCard>
  </div>
  <div class="manager-info-bottom">
    <div class="manager-info-bottom-contaniner">
      <el-pagination
      v-model:currentPage="currentPage4"
      :page-size="1"
      :small="false"
      :disabled="false"
      :background="true"
      layout="total, prev, pager, next, jumper"
      :total="parseInt(total)"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
    </div>
</div>
</template>

<script setup lang='ts'>
import { ref,reactive} from 'vue';
import AssInfoCard from '@/components/AssInfoCard.vue';
import { userRequest } from '@/api/UserRequest';
import ManagerRequest from '@/api/ManagerRequest';

let applyInfoData=reactive({
  id:'',
  name:'',
  state:'',
  teacherName:'',
  teacherPhone:'',
  associationIntroduction:'',
  associationRegisterEmail:'',
  associationStudentName:'',
  associationStudentNumber:'',//自我介绍
  associationStudentPhone:'',
  photo:[]
})

let fits=reactive([])


let userData:any = [];
userRequest.getUserInfo().then(response=>{
  userData=response;
  total.value=response.length;
  Object.keys(response[currentPage4.value-1].association).forEach(key=>{
      applyInfoData[key]=response[currentPage4.value-1].association[key];
    })
  Object.keys(response[currentPage4.value-1]).forEach(key=>{
    if(key==='photoWall'){
      applyInfoData.photo=response[currentPage4.value-1][key];
    }
    })
}).catch(err=>{
  console.log(err);
})


//搜索框
let searchInfo=ref('');
const selectStu=()=>{
  ManagerRequest.selectByAssociationName(searchInfo.value).then(response=>{
    if(response.length===0){
      return
    }
    total.value=response.length?response.length:1;
    userData = response;
    //将返回值传给 applyInfoData 供组件渲染
    Object.keys(response[currentPage4.value-1].association).forEach(key=>{
      applyInfoData[key]=response[currentPage4.value-1].association[key];
    })
    Object.keys(userData[currentPage4.value-1]).forEach(key=>{
    if(key==='photoWall'){
      applyInfoData.photo=userData[currentPage4.value-1][key];
    }
    })
  })
  .catch(err=>{
    console.log(err);
  })
}

//分页

const total=ref('');
const currentPage4 = ref(1);
const handleCurrentChange = () => {
    fits=userData[currentPage4.value-1].photoWall;
  Object.keys(userData[currentPage4.value - 1].association).forEach(key => {
      applyInfoData[key] = userData[currentPage4.value - 1].association[key];
    })
  Object.keys(userData[currentPage4.value-1]).forEach(key=>{
    if(key==='photoWall'){
      applyInfoData.photo=userData[currentPage4.value-1][key];
    }
    })
}
</script>

<style scoped lang="scss">
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
  "t-grey": #8a8888,
  //字体常用颜色--灰
  "t-white": #f5f5f5,
  //字体常用颜色--白
  "border": #707070
    //边框颜色
);
      //报名人信息展示
      .manager-info {
        position: relative;
        left: 0;
        top: 0;
        height: 100%;
        .manager-info-header {
          h2 {
            font-size: 2.8125rem;
            text-align: center;
            color: map-get($map: $colors, $key: t-grey);
          }
          .search-info{
            position: absolute;
            width: 25%;
            right: 5.625rem;
            top: 1.5625rem;
            font-size: 1.125rem;
          }
        }
        .manager-info-bottom {
          position: relative;
          top: 0;
          left: 0;
          height: 100px;
          .manager-info-bottom-contaniner {
            
          position: absolute;
          right: 100px;
          bottom: 2rem;
          }
        }
      }
</style>